<template>
    <el-dialog title="修改密码" :visible.sync="dialogPwdVisible" width="600px" :close-on-click-modal="false">
      <el-form ref="ruleForm" :inline="false" :rules="rules" :model="modifyForm" size="mini">    
        <el-form-item label="登陆账户">
            <el-input v-model="userInfo.nickName" :disabled="true" />
        </el-form-item>
        <el-form-item label="当前密码" prop="pwd">
            <el-input :type="pwdType" ref="pwd" placeholder="登陆账户原密码" v-model="modifyForm.pwd" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="新的密码" prop="newPwd">
            <el-input :type="newPwdType" ref="newPwd" placeholder="登陆账户新密码" v-model="modifyForm.newPwd" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogPwdVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini">确定</el-button>
      </span>
    </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { eidtPwd } from "@/api/user/user_api"
import { loginMD5 } from "@/utils/index"
// 密码认证
const validatorNewPwd = (rule, value, callback) => {
    if (!value) {
        return callback(new Error("请输入新密码"));
    } else {
        //空格
        var pwdblank = /^\S*$/;
        //非法字符
        var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
        var regUpper = /[A-Z]/;
        var regLower = /[a-z]/;
        var regStr = /[0-9]/;
        var complex = 0;
        if (regLower.test(value)) {
            ++complex;
        }
        if (regUpper.test(value)) {
            ++complex;
        }
        if (regStr.test(value)) {
            ++complex;
        }
        if(!pwdblank.test(value)){
            return callback(new Error('新密码不能有空格！'))
        }else if(pattern.test(value)){
            return callback(new Error('新密码不能有非法字符！'))
        }else if (complex < 3 || value.length < 8) {
            return callback(new Error('密码格式不正确、必须包含字母大小写和数字。且密码长度最少8位以上！'))
        }
         callback();
    }
}
export default {
  name: 'pwd',
  data(){
    return{
      modifyForm:{
        pwd:"",
        newPwd:""
      },
      dialogPwdVisible:false,
      pwdType:'password',
      newPwdType:'password',
      rules:{
        pwd:[{required: true,message:'请输入原密码',trigger: "blur"}],
        newPwd:[{required: true,message:'请输入新密码',trigger: "blur"}]
        //newPwd:[{required: true,validator: validatorNewPwd,trigger: "blur"}]
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.baseStore.userInfo
    }
  },
  methods: {
    pwdOpen(){
      this.modifyForm.pwd = ''
      this.modifyForm.newPwd = ''
      this.dialogPwdVisible = true
    },
     submitForm(formName){
      this.$refs[formName].validate(async valid => {
        if (valid) {
            let params = {
                oldPassword:this.modifyForm.pwd,
                newPassword:this.modifyForm.newPwd
            }
            let {code} = await eidtPwd(params);
            if(code ===0){
                this.$message.success("修改成功！");
                this.$refs['ruleForm'].resetFields();
                this.dialogPwdVisible = false;
            }
        } else {
            return false;
        }
      });
    }
  }
}
</script>


